<template>
  <view class="fuwu_main">
    <view class="top_bg"></view>
    <scroll-view class="card_bigbox" scroll-y>
      <uni-section title="找家政" type="line"> </uni-section>
      <view class="title_box"></view>
      <!-- 需求岗位 -->
      <view class="example">
        <!-- 需求岗位 -->
        <uni-forms
          ref="baseForm"
          :modelValue="baseFormData"
          label-position="top"
        >
          <uni-forms-item label="需求岗位" required>
            <view class="uni-px-5">
              <uni-data-checkbox
                mode="tag"
                v-model="demand"
                :localdata="sexs"
              ></uni-data-checkbox>
            </view>
          </uni-forms-item>
        </uni-forms>
        <uni-forms ref="baseForm" :modelValue="baseFormData">
          <uni-forms-item label="手机号码：" required>
            <uni-easyinput v-model="baseFormData.cell_phone" />
          </uni-forms-item>
          <uni-forms-item label="年龄">
            <uni-easyinput v-model="baseFormData.age" />
          </uni-forms-item>
          <uni-forms-item label="薪资">
            <uni-easyinput v-model="baseFormData.salary" />
          </uni-forms-item>
          <uni-forms-item label="住家" class="demand_checkbox">
            <uni-data-checkbox
                mode="tag"
                v-model="demand"
                :localdata="demands"
              ></uni-data-checkbox>
          </uni-forms-item>
          <uni-forms-item label="联系人">
            <uni-easyinput v-model="baseFormData.contacts" />
          </uni-forms-item>
          <uni-forms-item label="籍贯要求">
            <uni-easyinput
              v-model="baseFormData.native_place"
            />
          </uni-forms-item>
          <uni-forms-item label="工作地点" id="onBorder">
            <uni-easyinput
              v-model="baseFormData.working_place"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </scroll-view>
    <button type="primary" class="button" @click="submit('baseForm')">
      提交资料
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        cell_phone: "",
        age: "",
        salary: "",
        residence: "",
        contacts: "",
        native_place: "",
        working_place: "",
        demand: 0, // 需求
      },
      // 单选数据源
      sexs: [
        {
          text: "男",
          value: 0,
        },
        {
          text: "女",
          value: 1,
        },
        {
          text: "保密",
          value: 2,
        },
      ],
      demands:[
         {
          text: "住家",
          value: 0,
        },
        {
          text: "不住家",
          value: 1,
        },
      ],
      // 校验规则
      rules: {
        cell_phone: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
      },
    };
  },
  computed: {},
  onLoad() {},
  onReady() {},
  methods: {
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          console.log("success", res);
          uni.showToast({
            title: `校验通过`,
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="scss">
.uni-forms-item__label {
  width: auto !important;
}
.uni-forms-item {
  position: relative;
  display: flex;
  margin-bottom: 0px !important;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
  padding: 10px 0px;
}
.onBorder{
   border-bottom: 0px ;
}
.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: none !important;
}
.fuwu_main {
  width: 100%;
  // position: relative;
  height: 100%;
  // box-sizing: border-box;
  .top_bg {
    background-color: #3f51b5;
    height: 30px;
  }

  .card_bigbox {
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;

    bottom: 30px;
    // height: 100px;
    background-color: #fff;
    border-radius: 5px;
  }
  .title_box {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid #ccc;
  }
}

.button {
  display: block !important;
  width: 100%;
  height: 45px !important;
  line-height: 45px;
  position: fixed;
  text-align: center;
  bottom: 0px;
  left: 0;
  margin: 0 !important;
  background-color: #3f51b5 !important;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
.text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.uni-px-5 {
  padding-left: 10px;
  padding-right: 10px;
}
.uni-pb-5 {
  padding-bottom: 10px;
}
</style>
